<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$common.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">绑定微信(提现转账)</view>
		</view>
		<!-- 添加微信号 -->
		<view class="addForm">
			<view class="form" >
				<view class="item">
					<view class="key">微信授权</view>
					<view class="value">
						<input type="text" disabled="disabled" :value="nickname" placeholder="请授权微信号" />
						<text class="btn-getCaptcha" @click="auth">点此授权</text>
					</view>
				</view>
				<view class="item">
					<view class="key">真实姓名</view>
					<view class="value">
						<input type="text" v-model="data.name" placeholder="请输入真实姓名">
					</view>
				</view>
				<view class="item">
					<view class="key">手机号</view>
					<view class="value">{{data.phone}}</view>
				</view>
				<view class="item">
					<view class="key">图片验证</view>
					<view class="value">
						<input type="text" v-model="picCode" placeholder="请输入图片验证码" />
						<image :src="imgUrl" class="imgCaptcha" mode="aspectFit" @click="imgCaptcha"></image>
					</view>
				</view>
				<view class="item">
					<view class="key">短信验证</view>
					<view class="value">
						<input type="number" v-model="data.phoneValid" placeholder="请输入手机验证码" maxlength="6"/>
						<text :class="'btn-getCaptcha '+(isSend?'disabled':'')" @click="getCaptcha">{{captchaText}}</text>
					</view>
				</view>
			</view>
			<view class="ft-opera">
				<view class="btn-next" @click="submit">绑定提现微信</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/common/store';
	export default {
		data() {
			return {
				data:{
					appId:null,
					phoneCode:null,
					name:null,
					phone:null,
					phoneValid:null,
					wxCode:null
				},
				nickname:'待授权',
				picCode:'',
				time:'',
				imgUrl:'',
				captchaText:'获取验证码',
				isSend:false,
				toastT:null
			};
		},
		onLoad(option) {
			this.data.phone = store.getters.GET_userInfo.phone;
			this.data.appId = store.getters.GET_AppId;
			this.imgCaptcha();
			if(option.wxCode){
				this.data.wxCode = option.wxCode;
				this.nickname = '已授权！';
			}
		},
		methods:{
			//图片验证码初始化
			imgCaptcha(){
				this.time = Math.round(new Date());
				const httpDomain = store.getters.GET_httpDomain;
				const baseURL = store.state.baseURL;
				this.imgUrl = httpDomain+baseURL+"/api/v1/verifyCode.jpeg?w=300&h=80&t="+this.time;
			},
			//授权
			auth(){
				/*https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
					appid 公众号唯一标识
					redirect_uri  授权后重定向的回调链接地址（使用 urlEncode 对链接进行处理）
					response_type 返回类型（固定code）
					scope 应用授权作用域（弹出授权页面，可通过 openid 拿到昵称、性别、所在地）
					state 重定向后会带上 state 参数
				*/
			   let url = window.location.protocol + '//' + window.location.host + window.location.pathname;
			   url = encodeURIComponent(url)
				window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.data.appId
					+'&redirect_uri='+url
					+'&response_type=code&scope=snsapi_userinfo&state=wallet_wx_add#wechat_redirect';
			},
			submit(){
				if(!this.data.wxCode){
					uni.showModal({
						title:'温馨提示',
						content:'未完成微信授权',
						showCancel:false
					})
					return
				}
				if(!this.data.name){
					uni.showModal({
						title:'温馨提示',
						content:'请填写真实姓名',
						showCancel:false
					})
					return
				}
				if(!this.data.phoneValid){
					uni.showModal({
						title:'温馨提示',
						content:'请输入手机验证码',
						showCancel:false
					})
					return
				}
				const _self = this;
				const api = this.$request;
				api.post(api.url.transferWxBind,{
					appId:this.data.appId,
					name:this.data.name,
					wxCode:this.data.wxCode,
					phoneValid:this.data.phoneValid,
					pt:this.time
				},res=>{
					if(res.code==200){
						uni.showToast({
							title:"绑定成功！",
							icon:'none',
							success() {
								setTimeout(()=>{
									_self.toBack();
								},1000)
							}
						})
					}else{
						uni.showModal({
							title:'绑定失败',
							content:res.msg,
							showCancel:false
						})
					}
				})
			},
			getCaptcha(){
				if(!this.data.phone){
					uni.showModal({
						title:'温馨提示',
						content:'手机号为空，请重新登陆',
						showCancel:false
					})
					return
				}
				if(!this.picCode){
					uni.showModal({
						title:'温馨提示',
						content:'请输入图片验证码',
						showCancel:false
					})
					return
				}
				var _self = this;
				const api = this.$request;
				api.post(api.url.sendSMS,{
					phone:this.data.phone,
					code:this.picCode,
					pt:this.time,
					t:this.time
				},res=>{
					if(res.code==200){
						_self.isSend = true;
						let number = 60;
						let timer = setInterval(()=>{
							_self.captchaText = number--;
							if(number<=0){
								clearInterval(timer);
								_self.isSend = false;
								_self.captchaText = '获取验证码';
							}
						},1000)
					}else{
						_self.imgCaptcha();
						uni.showToast({
							title:'图片验证码错误',
							icon:'error'
						})
					}
				})
			},
			toBack(){
				if(this.data.wxCode){
					uni.navigateBack(2);
				}else{
					uni.navigateBack();
				}
			}
		}
	}
</script>

<style lang="less">
	.g-doc{ 
		position: relative; 
		box-sizing: border-box; 
		height: 100%;
	}
	.addForm{ 
		background: #fff; 
		border-radius: 10rpx 10rpx 0 0; 
		position: relative; height: 100%; 
		padding: 80rpx 30rpx 0; 
		display: flex; 
		flex-direction: 
		column;
	}
	.form{
		.item{ border-bottom: 1rpx solid #F3F3F3; height: 80rpx; display: flex; align-items: center;}
		input{ border: none; height: 80rpx; line-height: 80rpx; width: 100%; font-size: 28rpx; flex:1; }
		.key{ width: 147rpx; font-size: 28rpx;}
		.value{ display: flex; align-items: center;}
		.btn-getCaptcha{background:linear-gradient(90deg,#f4b349,#ec7136); color:#fff;font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
		.imgCaptcha{font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
		.disabled{ background: #D1D1D1;}
	}
	.ft-opera{ height: 100%; flex: 1; position: relative;}
	.btn-next{
		background:linear-gradient(90deg,#f4b349,#ec7136);
		width: 100%; 
		padding: 20rpx 0;
		margin: 40rpx auto 20rpx; 
		color:#fff; 
		border-radius: 10rpx; 
		text-align: center; 
	}
</style>
